(function ($) {
    'use strict';
    let transition = window.mt.transition;
    let init = function ($elem) {
        this.$elem = $elem;
        this.curX = parseFloat(this.$elem.css('left'));
        this.curY = parseFloat(this.$elem.css('top'));
    }
    let to = function (x, y, callback) {
        x = (typeof x === 'number') ? x : this.curX;
        y = (typeof y === 'number') ? y : this.curY;
        if (this.curX === x && this.curY === y) return;
        this.$elem.trigger('move', [this.$elem]);
        if (typeof callback === 'function') {
            callback();
        }
        this.curX = x;
        this.curY = y;
    }

    let Silent = function ($elem) {
        init.call(this, $elem); //改变this的指向，这里this指外面的this,如不使用call，this指init。
        this.$elem.removeClass('transition');
    };
    Silent.prototype.to = function (x, y) {
        let self = this;
        to.call(this, x, y, function () {
            self.$elem.css({left: x, top: y});
            self.$elem.trigger('moved', [self.$elem]);
        });
    };
    Silent.prototype.x = function (x) {
        this.to(x);
    };
    Silent.prototype.y = function (y) {
        this.to(null, y);
    };


    // css3 方式
    let Css3 = function ($elem) {
        this.$elem = $elem;// $elem = .slider-item 图片的父级div
        this.$elem.addClass('transition');
        this.curX = parseFloat(this.$elem.css('left'));
        this.curY = parseFloat(this.$elem.css('top'));
        this.$elem.css({left: this.curX, top: this.curY});
    };

    Css3.prototype.to = function (x, y) {
        let self = this;
        to.call(this, x, y, function () {
            self.$elem.off(transition.end).one(transition.end, function () {
                self.$elem.trigger('moved', [self.$elem]);
            });
            self.$elem.css({left: x, top: y});
        });
    };
    Css3.prototype.x = function (x) {
        this.to(x);
    };
    Css3.prototype.y = function (y) {
        this.to(null, y);
    };

    // js方式
    let Js = function ($elem) {
        init.call(this, $elem);
        this.$elem.removeClass('transition');
    };
    Js.prototype.to = function (x, y) {
        let self = this;
        to.call(this, x, y, function () {
            self.$elem.stop().animate({left: x, top: y}, function () {
                self.$elem.trigger('moved', [self.$elem]);
            });
        });
    };
    Js.prototype.x = function (x) {
        this.to(x);
    };
    Js.prototype.y = function (y) {
        this.to(null, y);
    };
    let defaults = {css3: false, js: false};

    let move = function ($elem, options) {
        // $elem = .slider-item 图片的父级div
        let mode = null;
        if (options.css3 && transition.isSupport) mode = new Css3($elem); // css3 transition
        else if (options.js) mode = new Js($elem);// js animation
        else mode = new Silent($elem);
        return {
            to: $.proxy(mode.to, mode), //改变指针this指向mode.
            x: $.proxy(mode.x, mode),
            y: $.proxy(mode.y, mode)
        };
    };

    $.fn.extend({
        // {css3: true, js: false, animation: 'slide', activeIndex: 0, interval: 0}
        move: function (option, x, y) {
            return this.each(function () {
                // $this = .slider-item 图片的父级div
                let $this = $(this),
                    mode = $this.data('move'),
                    options = $.extend({}, defaults, typeof option === 'object' && option);
                if (!mode) $this.data('move', mode = move($this, options));
                if (typeof mode[option] === 'function') mode[option](x, y);
            });
        }

    });

})(jQuery);